<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c" width="500" height="500" style="border: 1px solid #ccc"></canvas>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')
            ctx.moveTo(200,0);
            ctx.lineTo(200,400);

            ctx.stroke();

            ctx.font = '30px Arial';
            ctx.textAlign = 'start'
            ctx.fillText('你好 start',200,40)

            ctx.textAlign = 'end'
            ctx.fillText('你好 end',200,80)

            ctx.textAlign = 'left'
            ctx.fillText('你好 left',200,120)

            ctx.textAlign = 'right'
            ctx.fillText('你好 right',200,160)

            ctx.textAlign = 'center'
            ctx.fillText('你好 center',200,200)
        </script>
    </body>
</html>
